/* eslint-disable max-len */
import { Button, Dialog, Grid } from '@alifd/next';
import { observer } from 'mobx-react-lite';
import React, { useState } from 'react';
import DataForm from './DataForm';
import { useTreeAction } from '../hooks';
import { useStore } from '@/hooks';

const { Row, Col } = Grid;

const ActionPanel = observer(({ dictId, onBackClick }) => {
  const { dictTreeStore: store } = useStore();
  const [adding, setAdding] = useState(false);
  // eslint-disable-next-line no-unused-vars
  const [_, setTreeAction] = useTreeAction();
  const selected = store.selectedItem; // 不可用解构
  // const onSearch = () => {
  //   store.fetch(dictId);
  // };
  const onDelete = () => {
    Dialog.confirm({
      content: `确定要删除【${selected.name}】及其子节点吗 ?`,
      onOk: () => {
        store.delete(dictId, selected.itemId).then((r) => {
          setTreeAction({ action: 'deleting', data: selected });
        });
      },
    });
  };

  return (
    <Row>
      <Col span={16}>
        <Button.Group>
          <Button type="primary" onClick={() => setAdding(true)} >添加字典项</Button>
          <Button type="normal" onClick={onDelete} >删除字典项</Button>
        </Button.Group>
      </Col>
      <Col span={8} style={{ textAlign: 'right' }}>
        {/* <Observer>{() => <Search shape="simple" type="normal" value={store.keyword} onChange={(t) => { store.keyword = t; }} onSearch={onSearch} />}</Observer> */}
      </Col>
      <Dialog className="tau-ui-dialog" title={i18n.t('添加字典项')} visible={adding} footer={false}>
        <DataForm dictId={dictId} onSubmit={() => setAdding(false)} onCancel={() => setAdding(false)} />
      </Dialog>
    </Row>
  );
});

export default ActionPanel;
